<template>
  <div class="table-view">
    <!-- 按钮区域 -->
    <el-row
      type="flex"
      class="row-bg button-tab"
      justify="space-between">
      <el-row>
        <el-button type="primary" @click="addUserInfo">添加用户</el-button>
      </el-row>
      <el-input
        v-model="input"
        suffix-icon="el-icon-search"
        placeholder="请输入内容"
        class="search-input">
      </el-input>
    </el-row>
    <!-- 表单区域 -->
    <el-table
      style="width: 100%"
      height="580px"
      :data="pop.tableData"
      @selection-change="handleSelectionChange">

      <!-- 姓名 -->
      <el-table-column
        prop="address"
        label="姓名">
      </el-table-column>

      <!-- 组织机构 -->
      <el-table-column
        prop="address"
        label="组织机构">
      </el-table-column>

      <!-- 角色 -->
      <el-table-column
        prop="address"
        label="角色">
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.$index)"
            type="text" size="medium"
            style="font-weight: 400">
            删除
          </el-button>
          <span class="line">|</span>
          <el-button
            @click="modifyClick(scope.row)"
            type="text" size="medium"
            style="font-weight: 400">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="50%">
      <add-user v-if="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import AddUser from './AddUser'
export default {
  name: 'userTableView',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pop: {
        tableData: this.data,
      },
      input: '',
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  components: {
    AddUser,
  },
  methods: {
    modifyClick() {
      this.dialogVisible = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addUserInfo() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/table_view';
</style>